<template>
  <ProTableColumnSwitch v-model="columns" />
  <ProTable :columns="columns" :data="[]" />
</template>
<script lang="ts">
import { ProTableColumnSwitch } from '..';
import { defineComponent } from 'vue';
import { ProTable, useTableColumns } from '@/components/ProTable';

interface IDataItem {
  name: string;
  age: string;
  date: string;
  url: string;
  image: string;
}

export default defineComponent({
  components: {
    ProTableColumnSwitch,
    ProTable,
  },
  setup() {
    const { columns } = useTableColumns<IDataItem>(() => [
      {
        label: '名称',
        width: '100px',
        ellipsis: true,
        prop: 'name',
      },
      {
        label: '年龄',
        minWidth: '50px',
        prop: 'age',
      },
      {
        label: '日期',
        type: 'date',
        format: 'YYYY-MM-DD',
        prop: 'date',
      },
      {
        label: '图片',
        type: 'image',
        prop: 'url',
        width: '120px',
      },
      {
        label: '不在switch中',
        type: 'image',
        prop: 'url',
        width: '120px',
      },
    ]);
    return {
      columns,
    };
  },
});
</script>
